<template>
	<view>
		<view class="top-back">
			<view class="top-name">角色权限管理</view>
			<view class="top-right top-right-left" @click="sortAction">
				<view class="top-exit">添加成员</view>
			</view>

			<view class="top-right" :class="screenSelect?'top-right-select':''" @click="selectAction">
				<view :class="screenSelect?'top-contnet top-content-select': 'top-contnet'">筛选</view>
				<image v-if="!screenSelect" class="top-icon" src="../../../static/select.png"></image>
				<image v-if="screenSelect" class="top-icon" src="../../../static/select_select.png"></image>
			</view>
		</view>
		<view class="uni-container">
			<scroll-view class="left-back" scroll-y="true">
				<view class="left-item">
					<text>角色</text>
					<uni-icons @click="clickAddRoleAction" class="left-item-add" type="plusempty" size="20"></uni-icons>
				</view>
				<view :class="btnselect == index?'left-item left-item-select':'left-item'"
					v-for="(item,index) in roleArr" :key="index">
					<view class="left-item-name" @click="clickLestAction(index)">{{item.name}}</view>
					<image class="left-item-btn" v-bind:id="item.id" @click="leftAction"
						src="../../../static/pc_list.png"></image>
				</view>
			</scroll-view>
			<view>
				<uni-table ref="table" :loading="loading" stripe emptyText=" ">
					<uni-tr>
						<uni-th align="left">姓名</uni-th>
						<uni-th align="left">微信昵称</uni-th>
						<uni-th align="left">手机号</uni-th>
						<uni-th align="left">操作</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td align="left"><text selectable="true">{{ item.account.realName }}</text></uni-td>
						<uni-td align="left"><text selectable="true">{{ item.account.nickName }}</text></uni-td>
						<uni-td align="left"><text selectable="true">{{ item.account.mobile }}</text></uni-td>
						<uni-td align="left">
							<view style="display: flex;">
								<view class="item-blue-text" @click="delAction(item)">删除</view>
								<view style="margin-left: 12px;" class="item-blue-text" @click="editAction(item)">编辑
								</view>
							</view>
						</uni-td>
					</uni-tr>
				</uni-table>

				<view class="search-back" v-if="tableData.length == 0">
					<image class="search-image" :src="pc_search_nodata"></image>
					<view class="search-noresult">没有查询到结果</view>
				</view>
			</view>

		</view>
		<addMember v-if="showAddMember" :roleID='roleID' :memberItem='memberItem' :editType='memberType'
			v-on:successBack='updataRequest()' @addMemberClose='clickAddMemberClose'></addMember>
		<popSelect v-model="showMessage" :x="x" :y="y" placement="top-end" dynamic>
			<view>
				<view class="pop-item" @click="editRoleAction">编辑角色</view>
				<view class="pop-item" @click="delRoleAction">删除角色</view>
			</view>
		</popSelect>
		<addRole v-if="showAddRole" :roleID='roleID' :editType='roleType' v-on:successBack='updataRoleRequest()'
			@addRoleClose='clickAddRoleClose'></addRole>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="danger" cancelText="取消" confirmText="确定" title="提示" content="确定要删除吗？"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="roleDialog" type="dialog">
			<uni-popup-dialog type="danger" cancelText="取消" confirmText="确定" title="提示" content="确定要删除吗？"
				@confirm="roleConfirm" @close="roleClose"></uni-popup-dialog>
		</uni-popup>
		<popSelect v-model="showScreen" :x="screenx" :y="screeny" placement="top-end" dynamic>
			<view v-if="showScreen " class="screen-back">
				<uni-forms ref="baseForm" :modelValue="baseForm" style="width:200px;">
					<uni-forms-item>
						<uni-easyinput v-model="baseForm.accountQuery.realName" placeholder="姓名" />
					</uni-forms-item>
					<uni-forms-item>
						<uni-easyinput v-model="baseForm.accountQuery.nickName" placeholder="微信昵称" />
					</uni-forms-item>
					<uni-forms-item>
						<uni-easyinput v-model="baseForm.accountQuery.mobile" placeholder="手机号" />
					</uni-forms-item>
					<view class="select-bottom">
						<view class="select-bottom-left" @click="selectReset">重置</view>
						<view class="select-bottom-right" @click="selectSureAction">筛选</view>
					</view>
				</uni-forms>
			</view>
		</popSelect>
	</view>
</template>

<script>
	import addMember from "@/packageB/PC/systemSet/add.vue"
	import popSelect from "@/components/popSelect/popSelect.vue"
	import addRole from "@/packageB/PC/systemSet/addRole.vue"
	export default {
		components: {
			addMember,
			popSelect,
			addRole
		},
		data() {
			return {
				showAddMember: false,
				tableData: [],
				roleArr: [], //
				btnselect: 0,
				x: 0,
				y: 0,
				showMessage: false,
				showAddRole: false,
				selectRole: {},
				showScreen: false,
				screenSelect: false,
				roleID: '',
				roleType: 'add',
				memberType: 'add',
				memberItem: {},
				baseForm: {
					accountQuery: {
						mobile: '',
						realName: '',
						nickName: ''
					}
				},
				pc_search_nodata: getApp().globalData.baseImageUrl + '/pc_search_nodata.png'
			}

		},
		mounted() {
			this.requestRoleData();
		},
		methods: {
			async updataRequest() {
				this.requestData()
			},

			async updataRoleRequest() {
				this.requestRoleData()
			},
			//角色
			async requestRoleData() {
				let _this = this
				let parmas = {
					'asc': 'createTime',
					'size': 1000
				};
				const res = await this.$myRequest({
					url: "/oauth/role/list",
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.roleArr = res.data.data.list;
					if (!_this.selectRole.id) {
						if (_this.roleArr.length > 0) {
							_this.selectRole = _this.roleArr[0];
							_this.requestData();
						}
					}
					console.log(_this.roleArr)
				}
			},
			//成员列表
			async requestData() {
				let _this = this;
				let parmas = {
					size: '1000'
				};
				if (this.screenSelect) {
					let accountQuery = {};
					if (_this.baseForm.accountQuery.mobile) {
						this.$set(accountQuery, 'mobile', 'lk:' + _this.baseForm.accountQuery.mobile)
					}
					if (_this.baseForm.accountQuery.realName) {
						this.$set(accountQuery, 'realName', 'lk:' + _this.baseForm.accountQuery.realName)
					}
					if (_this.baseForm.accountQuery.nickName) {
						this.$set(accountQuery, 'nickName', 'lk:' + _this.baseForm.accountQuery.nickName)
					}
					this.$set(parmas, 'accountQuery', accountQuery)
				}
				const res = await this.$myRequest({
					url: "/oauth/role/list/user/" + _this.selectRole.id,
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.tableData = res.data.data;

				}
			},
			//成员删除
			delAction(item) {
				this.memberItem = item;
				this.$refs.alertDialog.open()
			},
			async dialogConfirm() {
				console.log('点击确认')
				let _this = this
				// 
				let parmas = {
					'ids': this.memberItem.id,
				}
				const res = await this.$myRequest({
					url: "/admin/adminUser",
					method: 'DELETE',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.requestData()
				}
			},
			//编辑
			editAction(item) {
				console.log(item)
				this.memberItem = item;
				this.roleID = this.selectRole.id;
				this.memberType = 'edit';
				this.showAddMember = true;
			},
			//关闭编辑
			clickWorkTimeClose() {
				this.showAddClass = false;
			},

			clickLestAction(index) {
				this.btnselect = index;
				this.selectRole = this.roleArr[index];
				this.requestData();
			},

			//新增
			sortAction() {
				this.roleID = this.selectRole.id;
				this.memberType = 'add';
				this.showAddMember = true;
			},

			//新增角色
			clickAddRoleAction() {
				this.roleID = '';
				this.roleType = 'add';
				this.showAddRole = true;
			},
			//角色操作
			leftAction(e) {
				console.log(e)
				this.x = e.touches[0].clientX
				this.y = e.touches[0].clientY + 4
				this.roleID = e.currentTarget.id;
				this.showMessage = !this.showMessage
			},

			//编辑角色
			editRoleAction() {
				this.showMessage = false;
				this.roleType = 'edit'
				this.showAddRole = true;
			},
			//删除角色
			delRoleAction() {
				this.showMessage = false;
				this.$refs.roleDialog.open()
			},
			//删除角色:确认
			async roleConfirm() {
				console.log('点击确认')
				let _this = this
				let parmas = {
					'ids': this.roleID,
				}
				const res = await this.$myRequest({
					url: "/oauth/role",
					method: 'DELETE',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.requestRoleData()
				}
			},
			//删除角色:取消
			roleClose() {

			},
			//筛选
			selectAction(e) {
				this.screenx = e.touches[0].clientX
				uni.getSystemInfo({
					success: res => {
						this.screenx = res.windowWidth - 30
					}
				})
				this.screeny = e.touches[0].clientY + 4
				this.showScreen = !this.showScreen
			},
			//筛选重置
			selectReset() {
				this.baseForm = {
						accountQuery: {
							mobile: '',
							realName: '',
							nickName: ''
						},
					},
					this.requestData();
				this.screenSelect = false;
			},
			//筛选确认	
			selectSureAction() {
				this.screenSelect = true;
				this.showScreen = !this.showScreen;
				this.requestData()
			},

			clickAddRoleClose() {
				this.showAddRole = false;
			},
			clickAddMemberClose() {
				this.showAddMember = false;
			}
		}
	}
</script>

<style scoped>
	.top-back {
		display: flex;
		align-items: center;
		padding: 10px;
	}

	.top-name {
		color: #333;
		font-size: 18px;
		font-weight: bold;
		margin-left: 30px;
	}

	.top-num {
		color: #999;
		font-size: 18px;
		margin-left: 4px;
	}

	.top-contnet {
		font-size: 14px;
		color: #999;
	}

	.top-icon {
		width: 16px;
		height: 16px;
	}

	.top-right {
		cursor: pointer;
		display: flex;
		align-items: center;
		margin-right: 16px;
		margin-left: 16px;
		padding: 5px 10px;
		border-radius: 5px;
	}

	.top-right-left {
		margin-left: auto;
	}

	.uni-container {
		margin-left: 40px;
		margin-right: 16px;
		width: auto;
		display: flex;
	}

	.search-back {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.search-noresult {
		font-size: 14px;
		color: #333;
		font-weight: 400;
	}

	.search-image {
		width: 150px;
		height: 150px;
	}

	.item-blue-text {
		cursor: pointer;
		font-size: 14px;
		font-weight: 400;
		color: #2DA9C5;
	}

	.top-exit {
		width: 76px;
		height: 30px;
		background: #E8F7FB;
		border-radius: 2px;
		font-size: 14px;
		font-weight: normal;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.left-back {
		width: 200px;
		min-width: 200px;
		background-color: white;
		height: 100%;
		border-right: 1px #eee solid;
	}

	.left-item {
		display: flex;
		font-size: 14px;
		color: #555;
		align-items: center;
		padding: 10px;
		font-weight: 500;
		background-color: white;
	}

	.left-item-select {
		background-color: #E8F7FB;
	}

	.left-item-name {
		font-weight: 400;
		max-width: 155px;
		width: 155px;
		cursor: pointer;
	}

	.left-item-btn {
		cursor: pointer;
		margin-right: 0px;
		margin-left: auto;
		width: 16px;
		height: 16px;
	}

	.pop-item {
		margin: 10px;
		color: #2DA9C5;
	}

	.left-item-add {
		margin-right: 0px;
		margin-left: auto;
		width: 20px;
		height: 20px;
		cursor: pointer;
	}

	.top-right-select {
		background-color: #E8F7FB;
	}

	.select-bottom {
		display: flex;
	}

	.select-bottom-left {
		cursor: pointer;
		height: 32px;
		width: 120px;
		color: #333;
		background: #FFFFFF;
		border-radius: 2px;
		border: 1px solid #EEEEEE;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}

	.select-bottom-right {
		cursor: pointer;
		height: 32px;
		width: 120px;
		color: #fff;
		background: #8ED8E9;
		border-radius: 2px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		margin-right: 0px;
		margin-left: auto;
	}

	.screen-back {
		padding: 10px;
		width: 300px;
	}

	.top-content-select {
		color: #2DA9C5;
	}
</style>
